//@ts-nocheck
import React, { useState, useEffect } from 'react'
import { Tooltip } from 'antd'
import './index.less'

interface IProps {
  data?: any
}

const CylinderBarChart: React.FC<IProps> = ({ data }) => {
  const [listData, setListData] = useState([])

  useEffect(() => {
    let maxValue = 0
    data.forEach((dataItem) => {
      if (dataItem.code > maxValue) maxValue = dataItem.code
    })
    if (maxValue === 0) {
      setListData(
        data.map((dataItem) => {
          return {
            ...dataItem,
            title: dataItem.title,
            percent: 0
          }
        })
      )
      return
    }

    setListData(
      data.map((dataItem) => {
        return {
          ...dataItem,
          title: dataItem.title,
          percent: (dataItem.code / maxValue) * 100
        }
      })
    )
  }, [data])

  return (
    <div className="cylinder-bar-chart">
      <div className="chart-wrapper">
        <div className="scale">
          <span>5.00</span>
          <span>0.00</span>
        </div>
        <div className="content">
          <div className="bar-list" style={{ padding: `0 16px` }}>
            {listData?.map((item, index) => {
              return (
                <div className="bar-item" key={String(item.label) + item.code + index}>
                  <div className="percent-wrapper" style={{ height: 'calc(100% - 40px)' }}>
                    <Tooltip
                      overlayClassName="cylinder-bar-chart-tooltip"
                      color="#ffffff"
                      placement="rightTop"
                      title={`${item.code}`}
                      arrowPointAtCenter
                    >
                      <div
                        className="precent"
                        style={{
                          width: 16,
                          height: `${item.percent}%`,
                          backgroundColor: '#5A86FF'
                        }}
                      />
                    </Tooltip>
                  </div>
                  <div className="title">{item.label}</div>
                </div>
              )
            })}
          </div>
          <div className="line-list">
            <div className="line " style={{ top: `${0}%` }}>
              <div className="dash default" />
            </div>
            <Tooltip
              overlayClassName="cylinder-bar-line-chart-tooltip"
              color="#ffffff"
              placement="right"
              title="优秀线"
              arrowPointAtCenter
            >
              <div className="line " style={{ top: `${100 - 70}%` }}>
                <div className="dash green" />
              </div>
            </Tooltip>
            <Tooltip
              overlayClassName="cylinder-bar-line-chart-tooltip"
              color="#ffffff"
              placement="right"
              title="达标线"
              arrowPointAtCenter
            >
              <div className="line " style={{ top: `${100 - 30}%` }}>
                <div className="dash yellow" />
              </div>
            </Tooltip>
            <div className="line " style={{ top: `${100}%` }}>
              <div className="dash bottom" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default CylinderBarChart
